<template>
    <div>
        <div>
            <el-select v-if="isSelect" v-model="value" placeholder="请选择" @change="change">
                <el-option v-for=" item  in  options " :key="item.cid" :label="`${item.bak}  ${item.name}`"
                    :value="item.cid">
                </el-option>
            </el-select>
        </div> 
        <div style="width: 100%;display: flex;">
            <el-table :data="teadData">
                <el-table-column prop="hm" label="面试时间安排" >
                </el-table-column>
                <el-table-column prop="name" label="面试公司(面试人)" >
                </el-table-column>
            </el-table>
            <div id="main" style="width: 50%;height: 400px; ;" ref="chart"> </div>
        </div>




    </div>
</template>


<script>
 
import { getCompany, getClassList, getCompanyApi } from '@/api/mian'
export default {
    data() {
        return {
            content: '',
            value1: '',
            value2: '',
            isSelect: false,
            options: [],
            value: '',
            teadData: [],
            tableData: [],
            timesdata: [],
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                company: '',
                times: '',
                remark: '',
                callbackmsg: '',
            },
            formLabelWidth: '120px',
            cid: 63,
            datas: []
        }
    },
    mounted() {
        this.getCompanyApidata()
        this.userJiao()
        this.getEchartData()

    },
    methods: {
        getCompanyApidata() {
            let obj = { cid: this.cid }
            getCompanyApi(obj).then(res => {
                console.log(res);
                let arr = []
                for (let i = 0; i < res.data.length; i++) {
                    let obj = {}
                    obj.name = res.data[i].nickname
                    obj.value = Math.floor((res.data[i].zs / res.data.length) * 100)
                    arr.push(obj)
                }
                console.log(arr, 72);
                this.datas = arr
                console.log(this.datas, 72);
            })
        },
        getEchartData() {
            let obj = { cid: this.cid }
            let num = 0
            getCompanyApi(obj).then(res => {
                console.log(res);
                let arr = []
                for (let i = 0; i < res.data.length; i++) {
                    let obj = {}
                    obj.name = res.data[i].nickname
                    obj.value = res.data[i].zs
                    arr.push(obj)
                    num += res.data[i].zs
                }
                console.log(arr, 72);
                this.datas = arr
                console.log(this.datas, 72);

                const chart = this.$refs.chart
                if (chart) {
                    const myChart = this.$echarts.init(chart)
                    const option = {
                        title: {
                            text: '面试量统计图',
                            subtext: '面试量：' + num,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: this.datas,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    formatter: '{b}: ({d}%)'
                                }
                            }
                        ]
                    }
                    myChart.setOption(option)
                    window.addEventListener("resize", function () {
                        myChart.resize()
                    })
                }
                this.$on('hook:destroyed', () => {
                    window.removeEventListener("resize", function () {
                        myChart.resize();
                    });
                })
            })
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        userJiao() {
            let { roles } = JSON.parse(localStorage.getItem('userInfo'))
            console.log(roles);
            if (roles === 'teacher') {
                this.isSelect = true
                let obj = { pageSize: 999, pageInedx: 1 }
                getClassList(obj).then(res => {
                    if (res.code === 20000) {
                        this.options = res.data.list
                        this.total = res.data.count
                    }
                })
            }
        },
        //将时间戳转换为年月日时分秒
        timestampToTime(timestamp) {
            let date = new Date(parseInt(timestamp));
            let Year = date.getFullYear();
            let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
            let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
            let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
            let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
            let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            let GMT = Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
            return GMT;
        },
        change(id) {
            this.cid = id
            let currentDate = new Date();
            // 将时、分、秒、毫秒设为0，获取当天0点时间
            currentDate.setHours(0, 0, 0, 0);

            // 当天0点时间
            let startTime = currentDate.getTime();
            let endTime = currentDate.setDate(currentDate.getDate() + 1)
            console.log(endTime, startTime);
            let obj = { cid: id, startTime: startTime, endTime: endTime }
            console.log(obj);
            getCompany(obj).then(res => {
                console.log(res.data);
                if (res.code === 20000) {
                    let list = []
                    for (let i = 0; i < res.data.length; i++) {
                        list.push({nickname:res.data[i].nickname,times:res.data[i].times*1,company:res.data[i].company})  
                    }
                    console.log(list);
                    const mergedArr = list.reduce((acc, item) => {
                        let lists = acc.find((i)=>i.hm===this.timestampToTime(item.times))
                        if(lists){
                            lists.name+=`${item.company}(${item.nickname})`
                        }else{
                            acc.push({
                                name:`${item.company}(${item.nickname})`,   // 公司名称
                                hm:this.timestampToTime(item.times),   // 日期
                                times:this.timestampToTime(item.times), 
                            })
                        }
                        return acc;
                    }, []);
                    this.teadData = mergedArr
                    console.log(mergedArr);
                }
            })


        }
    },
}



</script>